<template>
  <div>
    <a-modal
      :visible.sync="visible"
      v-bind="$attrs"
      v-on="$listeners"
      :maskClosable="false"
      :footer="null"
      width="664px"
      :title="parameter.text"
      wrapClassName="add-modal-container"
      @cancel="closeModal()"
    >
      <div class="curve-modal-body">
        <a-form-model ref="ruleForm" :model="form" :rules="rules">
          <a-form-model-item label="项目名称" prop="proName">
            <a-select
              placeholder="请选择项目"
              v-model="form.proName"
              showSearch
              :filter-option="filterOption"
            >
              <a-select-option
                :value="item.proCode"
                v-for="item in proNameSource"
                :key="item.uuid"
              >
                {{ item.proName }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item label="任务名称" prop="taskName">
            <a-input
              placeholder="请输入任务名称"
              v-model="form.taskName"
              :maxLength="50"
            />
          </a-form-model-item>
          <a-form-model-item label="评价标准名称" prop="modelId">
            <a-select placeholder="请选择评价标准" v-model="form.modelId">
              <a-select-option
                :value="item.uuid"
                v-for="item in evaSource"
                :key="item.uuid"
              >
                {{ item.modelName }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item label="资料上传截止时间" prop="deadline">
            <a-date-picker
              style="width: 100%"
              v-model="form.deadline"
              format="YYYY-MM-DD"
              valueFormat="YYYY-MM-DD"
              :disabled-date="disabledDate"
              :defaultPickerValue="defaultPickerValue"
              :placeholder="
                proInfo.uploadStartDate
                  ? '资料上传规定时间：' +
                    proInfo.uploadStartDate +
                    '~' +
                    proInfo.uploadEndDate
                  : '请选择资料上传截至日期'
              "
            />
          </a-form-model-item>
        </a-form-model>
      </div>
      <div class="curve-modal-footer">
        <a-button type="default" @click="closeModal()">取消 </a-button>
        <a-button type="primary" @click="onSubmit()" :loading="buttonLoading">
          确定
        </a-button>
      </div>
    </a-modal>
  </div>
</template>

<script>
import moment from "moment";
import bjSelect from "@/components/extendCustom/bj-select";
import { axios } from "@/utils/request";
export default {
  name: "addModal",
  components: {
    bjSelect,
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    parameter: {
      type: Object,
      default: {},
    },
  },
  watch: {
    visible: {
      handler(val) {
        this.$emit("update:visible", val);
        if (val) {
          let { uuid } = this.parameter;
          this.getData();
          if (uuid) {
            this.getDetail();
          } else {
            let { tenantCode } = this.$parent.condition;
            this.form.proName = tenantCode;
          }
        }
      },
      immediate: true,
    },
  },
  data() {
    return {
      buttonLoading: false,
      form: {
        //项目名称
        proName: undefined,
        //任务名称
        taskName: "",
        //评价标准名称
        modelId: undefined,
        //截止时间
        deadline: "",
      },
      rules: {
        proName: [
          { required: true, message: "请选择项目名称", trigger: "change" },
        ],
        taskName: [
          { required: true, message: "请输入任务名称", trigger: "blur" },
        ],
        modelId: [
          { required: true, message: "请选择评价标准名称", trigger: "change" },
        ],
        deadline: [
          {
            required: true,
            message: "请选择资料上传截止时间",
            trigger: "change",
          },
        ],
      },
      //项目名称
      proNameSource: [],
      proNameLoading: false,
      //评价标准名称
      evaSource: [],
      evaLoading: false,
      defaultPickerValue: "",
      //项目基本信息
      proInfo: {},
    };
  },
  methods: {
    getData() {
      Promise.all([this.getProjectList(), this.getEvaList()])
        .then()
        .finally((_) => {});
    },
    disabledDate(current) {
      let { uploadStartDate, uploadEndDate } = this.proInfo;
      if (uploadStartDate) {
        let flag = moment(moment(current).format("YYYY-MM-DD")).isBetween(
          uploadStartDate,
          uploadEndDate,
          undefined,
          "[]"
        );
        return !flag;
      } else {
        return false;
      }
    },
    //查询项目下拉框
    getProjectList() {
      this.proNameLoading = true;
      return new Promise((resolve, reject) => {
        axios
          .get(
            `/mdata/sysProject/getProListByQX`,
            {},
            {
              headers: {
                "Content-Type": "application/json",
              },
            }
          )
          .then((res) => {
            this.proNameSource = res?.data ?? [];
            let { tenantCode } = this.$parent.condition;
            this.proInfo = this.proNameSource.find(
              (v) => v.proCode == tenantCode
            );
            let { uuid } = this.parameter;
            let { uploadStartDate } = this.proInfo;
            if (!uuid) {
              this.defaultPickerValue = uploadStartDate;
            }
            resolve();
          })
          .catch((_) => {
            this.proNameSource = [];
            this.proInfo = {};

            reject();
          })
          .finally((_) => {
            this.proNameLoading = false;
          });
      });
    },
    //查询评价标准-下拉框
    getEvaList() {
      this.evaLoading = true;
      return new Promise((resolve, reject) => {
        axios
          .post(
            `/probusiness/qeModel/list`,
            { modelName: "", province: "", modelType: "1" },
            {
              headers: {
                "Content-Type": "application/json",
              },
            }
          )
          .then((res) => {
            this.evaSource = res?.data ?? [];
            resolve();
          })
          .catch((_) => {
            this.evaSource = [];
            reject();
          })
          .finally((_) => {
            this.evaLoading = false;
          });
      });
    },

    //查询详情
    getDetail() {
      let { uuid } = this.parameter;
      axios
        .get(`/probusiness/qeTaskAllocation/getDetail?id=${uuid}`, {
          headers: {
            "Content-Type": "application/json",
          },
        })
        .then((res) => {
          this.form = {
            //项目名称
            proName: res.data?.tenantCode,
            //任务名称
            taskName: res.data?.taskName,
            //评价标准名称
            modelId: res.data?.modelId,
            //截止时间
            deadline: res.data?.deadline,
          };
        })
        .catch((_) => {});
    },

    //提交
    onSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.buttonLoading = true;
          let { form } = this;
          let { uuid } = this.parameter;
          let formJson = {
            //项目名称
            tenantCode: form.proName,
            //任务名称
            taskName: form.taskName,
            //评价标准名称
            modelId: form.modelId,
            //截止时间
            deadline: form.deadline,
          };
          //编辑
          if (uuid) {
            formJson.uuid = uuid;
          }
          axios
            .post(`/probusiness/qeTaskAllocation/saveOrUpdateData`, formJson, {
              headers: {
                "Content-Type": "application/json",
              },
            })
            .then((res) => {
              if (res.statusCode === 200 || res === 1) {
                this.$message.success("操作成功", 1.5);
                this.closeModal();
                this.$parent.getTableData();
              } else {
                this.$message.error(res?.message ?? "操作失败");
              }
            })
            .catch((_) => {})
            .finally((_) => {
              this.buttonLoading = false;
            });
        }
      });
    },

    //关闭弹窗
    closeModal() {
      this.resetForm();
      this.$emit("update:visible", false);
    },

    //重置表单
    resetForm() {
      this.form = {
        //项目名称
        proName: undefined,
        //任务名称
        taskName: "",
        //评价标准名称
        modelId: undefined,
        //截止时间
        deadline: "",
      };
      this.$refs.ruleForm.resetFields();
    },

    //select 搜索过滤
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    },
  },
};
</script>

<style lang="less" scoped>
@primary-color: @primary-color;
/deep/.add-modal-container {
  .ant-modal-body {
    padding: 0 !important;
  }
  .ant-modal-header {
    position: relative;
    .ant-modal-title {
      &::before {
        content: "";
        position: absolute;
        top: 18px;
        left: 10px;
        background-color: @primary-color;
        height: 17px;
        width: 5px;
      }
    }
  }

  .curve-modal-body {
    padding: 14px;
    max-height: 700px;
    overflow: auto;
  }
  .curve-modal-footer {
    padding: 10px 16px;
    display: flex;
    justify-content: flex-end;
    border-top: 1px solid #e8e8e8;
    border-radius: 0 0 4px 4px;
    button {
      &:last-child {
        margin-left: 20px;
      }
    }
  }
  .ant-form-item {
    display: flex;
    .ant-form-item-label {
      flex-shrink: 0;
      width: 150px;
    }
    .ant-form-item-control-wrapper {
      flex: 1;
    }
  }
}
</style>
